import { Row, Col, Card } from 'antd'
import {
  UserOutlined,
  ShoppingCartOutlined,
  ContainerOutlined,
  MessageTwoTone,
  PictureTwoTone,
  BellTwoTone,
  CalendarOutlined,
  ControlOutlined
} from '@ant-design/icons'
import { useNavigate } from 'react-router-dom'

const iconNavs = [
  {
    icon: <UserOutlined style={{ color: '#86d2f4' }} />,
    title: '用户',
    path: '/user/list'
  },
  {
    icon: <ShoppingCartOutlined style={{ color: '#8b5cf6' }} />,
    title: '商品',
    path: '/goods/list'
  },
  {
    icon: <ContainerOutlined style={{ color: '#d946ef' }} />,
    title: '订单',
    path: '/order/list'
  },
  {
    icon: <MessageTwoTone style={{ color: '#14b8a6' }} />,
    title: '评价',
    path: '/comment/list'
  },
  {
    icon: <PictureTwoTone style={{ color: '#f76f86' }} />,
    title: '图库',
    path: '/image/list'
  },
  {
    icon: <BellTwoTone style={{ color: '#10b981' }} />,
    title: '公告',
    path: '/notice/list'
  },
  {
    icon: <ControlOutlined />,
    title: '配置',
    path: '/setting/base'
  },
  {
    icon: <CalendarOutlined style={{ color: '#f59e0b' }} />,
    title: '优惠券',
    path: '/coupon/list'
  }
]

const HomeNav = () => {
  const nav = useNavigate()
  return (
    <>
      <Row gutter={20}>
        {iconNavs.map((item, index) => {
          return (
            <Col
              key={index}
              span={3}
              style={{ textAlign: 'center', cursor: 'pointer' }}
              onClick={() => {
                nav(item.path)
              }}
            >
              <Card hoverable>
                <span>{item.icon}</span>
                <br />
                <span>{item.title}</span>
              </Card>
            </Col>
          )
        })}
      </Row>
    </>
  )
}
export default HomeNav
